<script setup>
import gfm from "@bytemd/plugin-gfm";
import { Editor } from "@bytemd/vue-next";
import "bytemd/dist/index.css";
import { notebookFetch, noteFetch, uploadNoteImageFetch } from "../../composables/useHttpFetch";
import { message } from "ant-design-vue";
import { debounce } from "lodash-es";
import { useUserInfo } from "../../composables/state";
import { Icon } from "@iconify/vue";

// ==================== 插件配置 ====================
const plugins = ref([gfm()]);

const changeState = () => {
  let text = "";
  switch (noteData.value.state) {
    case 1:
      text = "已保存为草稿";
      break;
    case 2:
      text = "已发布";
      break;
    case 3:
      text = "已下线";
      break;
    default:
      break;
  }
  plugins.value = [
    gfm(),
    {
      actions: [
        {
          title: "立即发布",
          icon: "立即发布",
          position: "right",
          handler: {
            type: "action",
            click: (ctx) => {
              noteData.value.state = 2;
              handlePublishNote();
            },
          },
        },
      ],
    },
  ];
};

// ==================== 响应式数据 ====================
// 文集相关
const notebookData = ref(null);
const notebookName = ref("");
const currentNotebookIndex = ref(0);
const currentNotebookId = ref(0);

// 文章相关
const notesData = ref([]);
const currentNoteIndex = ref(0);
const noteData = ref({
  id: null,
  title: "",
  content_md: "",
  state: 1,
});

// 弹窗状态
const editVisible = ref(false);
const deleteVisible = ref(false);
const deleteNoteVisible = ref(false);
const showCreateNb = ref(false);

// 编辑数据
const cur_notebook = reactive({
  id: "",
  name: "",
});
const delete_notebook = reactive({
  id: "",
  name: "",
});
const current_note = reactive({
  id: "",
  title: "",
});

// ==================== 初始化数据 ====================
// 使用客户端获取，避免 SSR 时 cookie 传递问题
const {
  data: notebookDataResponse,
  error: notebookError,
  refresh: refreshNotebooks,
  pending: notebookPending,
} = notebookFetch({
  method: "GET",
  server: false, // 客户端获取
  key: "notebookFetch",
});

// 监听数据变化
watch(notebookDataResponse, (newData) => {
  if (newData && newData.code === 0) {
    notebookData.value = newData;
    // 如果文集数据加载完成，自动加载第一个文集的文章
    if (notebookData.value?.data?.list && notebookData.value.data.list.length > 0) {
      const firstNotebook = notebookData.value.data.list[0];
      currentNotebookId.value = firstNotebook.id;
      currentNotebookIndex.value = 0;
      notebookName.value = firstNotebook.name;
      fetchNotes(false, firstNotebook.id, true);
    }
  } else if (newData && newData.code === 1) {
    console.error("获取文集失败:", newData.msg);
    if (process.client) {
      message.error(newData.msg || "获取文集失败");
    }
  }
}, { immediate: true });

// 监听错误
watch(notebookError, (error) => {
  if (error && process.client) {
    console.error("获取文集数据失败:", error);
    // 401 错误已经在 useHttpFetch 中处理了跳转，这里只显示错误提示
    if (error.statusCode !== 401) {
      message.error("获取文集数据失败，请刷新页面重试");
    }
  }
});

// ==================== API 调用函数 ====================
// 获取文章列表
const fetchNotes = async (isServer, notebookId, autoSelectFirst = true) => {
  try {
    // 确保 notebookId 是数字类型
    const nbId = Number(notebookId);
    if (isNaN(nbId) || nbId <= 0) {
      console.error("无效的文集ID:", notebookId);
      message.error("文集ID无效");
      return;
    }
    
    const { data, error } = await notesFetch({
      method: "GET",
      server: isServer,
      key: `fetchNotes-${nbId}-${Date.now()}`, // 使用时间戳确保每次请求都发送
      params: { notebookId: nbId },
      getCachedData: () => undefined, // 禁用缓存，确保每次都获取最新数据
    });

    // 检查是否有网络错误
    if (error.value) {
      console.error("获取文章列表请求失败:", error.value);
      if (isServer) {
        throw createError({
          statusCode: 500,
          statusMessage: "获取文章列表失败",
        });
      } else {
        message.error("获取文章列表失败，请检查网络连接");
        return;
      }
    }

    // 检查响应数据是否存在
    if (!data.value) {
      if (isServer) {
        throw createError({
          statusCode: 500,
          statusMessage: "服务器响应异常",
        });
      } else {
        message.error("服务器响应异常");
        return;
      }
    }

    if (data.value.code === 0) {
      // 确保 list 存在
      const newList = data.value.data?.list || [];
      notesData.value = newList;
      
      if (!isServer) {
        isLoad.value = false;
        // 只有在明确要求时才自动选择第一篇（例如首次加载或切换文集时）
        if (autoSelectFirst && newList && newList.length > 0) {
          currentNoteIndex.value = 0;
          await getNote(false, newList[0]?.id || 0);
        } else if (newList.length === 0) {
          // 如果没有文章，清空编辑器
          noteData.value = {
            id: null,
            title: "",
            content_md: "",
            state: 1,
          };
          currentNoteIndex.value = -1;
          changeState();
        }
      }
    } else {
      if (isServer) {
        throw createError({
          statusCode: 500,
          statusMessage: data.value.msg || "获取文章列表失败",
        });
      } else {
        message.error(data.value.msg || "获取文章列表失败");
      }
    }
  } catch (error) {
    console.error("获取文章列表失败:", error);
    if (isServer) {
      throw error;
    } else {
      message.error("获取文章列表失败");
    }
  }
};

// 初始化逻辑已移到 watch 中，当文集数据加载完成后自动执行

// 创建文集
const createNotebook = async () => {
  if (!notebookName.value || notebookName.value.trim() === "") {
    message.warning("请输入文集名称");
    return;
  }
  
  try {
    const { data } = await notebookFetch({
      method: "POST",
      body: { name: notebookName.value.trim() },
      server: false,
      key: "createNotebook",
      getCachedData: () => undefined, // 禁用缓存
    });

    if (data.value && data.value.code === 0) {
      notebookName.value = "";
      showCreateNb.value = false; // 关闭输入框
      message.success("文集创建成功");
      await refreshNotebooks();
      
      // 等待文集列表刷新后，自动选中新创建的文集
      await nextTick();
      if (notebookData.value?.data?.list && notebookData.value.data.list.length > 0) {
        const newNotebook = notebookData.value.data.list.find(
          (nb) => nb.name === data.value.data?.name || nb.id === data.value.data?.id
        ) || notebookData.value.data.list[0];
        
        if (newNotebook) {
          const index = notebookData.value.data.list.findIndex(nb => nb.id === newNotebook.id);
          if (index !== -1) {
            await handleSelectNotebook(newNotebook, index);
          }
        }
      }
    } else {
      message.error(data.value?.msg || "创建文集失败");
    }
  } catch (error) {
    console.error("创建文集失败:", error);
    message.error("创建文集失败");
  }
};

// 更新文集
const updateNotebook = async () => {
  try {
    const { data } = await notebookFetch({
      method: "PUT",
      body: { id: cur_notebook.id, name: cur_notebook.name },
      server: false,
      key: "updateNotebook",
    });

    if (data.value.code === 0) {
      message.success("文集修改成功");
      await refreshNotebooks();
      cur_notebook.value = { id: "", name: "" };
      editVisible.value = false;
    } else {
      message.error(data.value.msg);
    }
  } catch (error) {
    console.error("修改文集失败:", error);
    message.error("修改文集失败");
  }
};

// 删除文集
const removeNotebook = async () => {
  try {
    const { data } = await notebookFetch({
      method: "DELETE",
      body: { id: delete_notebook.id },
      server: false,
      key: "removeNotebook",
    });

    if (data.value.code === 0) {
      message.success("文集删除成功");
      await refreshNotebooks();
      delete_notebook.value = { id: "", name: "" };
      deleteVisible.value = false;
    } else {
      message.error(data.value.msg);
    }
  } catch (error) {
    console.error("删除文集失败:", error);
    message.error("删除文集失败");
  }
};

// 创建文章
const createNote = async () => {
  // 检查是否选择了文集
  if (!currentNotebookId.value || currentNotebookId.value === 0) {
    message.warning("请先选择或创建一个文集");
    return;
  }

  try {
    const { data, error } = await noteFetch({
      method: "POST",
      body: {
        notebookId: currentNotebookId.value,
      },
      server: false,
      key: `createNote-${Date.now()}`,
      getCachedData: () => undefined, // 禁用缓存
    });

    // 检查是否有网络错误
    if (error.value) {
      console.error("创建文章请求失败:", error.value);
      message.error("网络请求失败，请检查网络连接");
      return;
    }

    // 检查响应数据是否存在
    if (!data.value) {
      message.error("服务器响应异常，请稍后重试");
      return;
    }

    if (data.value.code === 0) {
      message.success("文章创建成功");
      
      // 获取新创建的文章 ID
      let newNoteId = null;
      if (data.value.data && data.value.data.noteId) {
        newNoteId = Number(data.value.data.noteId);
      }
      
      // 刷新文章列表（禁用缓存，确保获取最新数据）
      await fetchNotes(false, currentNotebookId.value, false);
      
      // 等待列表更新
      await nextTick();
      
      // 检查列表是否更新成功
      if (notesData.value && notesData.value.length > 0) {
        let targetIndex = -1;
        
        if (newNoteId) {
          // 如果有返回的 noteId，在列表中找到新文章的位置
          targetIndex = notesData.value.findIndex(item => item.id === newNoteId);
        }
        
        // 如果找不到，使用第一篇（通常是最新创建的）
        if (targetIndex === -1) {
          targetIndex = 0;
        }
        
        const targetNote = notesData.value[targetIndex];
        if (targetNote) {
          currentNoteIndex.value = targetIndex;
          noteData.value.id = targetNote.id;
          // 加载新创建的文章内容到编辑器
          await getNote(false, targetNote.id);
        }
      } else {
        console.warn("文章列表为空，无法加载新文章");
        message.warning("文章创建成功，但列表未更新，请手动刷新");
      }
    } else {
      message.error(data.value.msg || "创建文章失败");
    }
  } catch (error) {
    console.error("创建文章失败:", error);
    message.error("创建文章失败，请稍后重试");
  }
};

// 删除文章
const removeNote = async () => {
  if (!current_note.id) {
    message.error("未选择要删除的文章");
    deleteNoteVisible.value = false;
    return;
  }
  
  try {
    const deleteNoteId = current_note.id;
    const isCurrentNote = deleteNoteId === noteData.value.id;
    // 在删除前找到被删除文章的索引
    const deletedIndex = notesData.value.findIndex(item => item.id === deleteNoteId);
    
    const { data, error } = await noteFetch({
      method: "DELETE",
      body: {
        noteId: deleteNoteId,
      },
      server: false,
      key: `removeNote-${deleteNoteId}-${Date.now()}`,
      getCachedData: () => undefined, // 禁用缓存
    });

    if (error.value) {
      console.error("删除文章请求失败:", error.value);
      message.error("网络请求失败，请检查网络连接");
      deleteNoteVisible.value = false;
      return;
    }

    if (!data.value) {
      message.error("服务器响应异常");
      deleteNoteVisible.value = false;
      return;
    }

    if (data.value.code === 0) {
      message.success("文章已删除");
      
      // 关闭对话框
      deleteNoteVisible.value = false;
      
      // 刷新文章列表（不自动选择）
      await fetchNotes(false, currentNotebookId.value, false);
      
      // 等待列表更新
      await nextTick();
      
      // 如果删除的是当前正在编辑的文章，清空编辑器并选择新文章
      if (isCurrentNote) {
        noteData.value = {
          id: null,
          title: "",
          content_md: "",
          state: 1,
        };
        
        // 如果还有文章，选择第一篇
        if (notesData.value && notesData.value.length > 0) {
          currentNoteIndex.value = 0;
          await getNote(false, notesData.value[0].id);
        } else {
          currentNoteIndex.value = -1;
          changeState(); // 更新编辑器状态
        }
      } else {
        // 如果删除的不是当前文章，调整选中索引
        if (deletedIndex !== -1 && deletedIndex < currentNoteIndex.value) {
          // 如果删除的文章在当前文章之前，索引需要减1
          currentNoteIndex.value = Math.max(0, currentNoteIndex.value - 1);
        } else if (currentNoteIndex.value >= notesData.value.length && notesData.value.length > 0) {
          // 如果当前索引超出范围，选择最后一篇
          currentNoteIndex.value = notesData.value.length - 1;
          await getNote(false, notesData.value[currentNoteIndex.value].id);
        }
      }
      
      // 清空删除对话框的数据
      current_note.id = "";
      current_note.title = "";
    } else {
      message.error(data.value.msg || "删除失败");
      deleteNoteVisible.value = false;
    }
  } catch (error) {
    console.error("删除文章失败:", error);
    message.error("删除文章失败，请稍后重试");
    deleteNoteVisible.value = false;
  }
};

// ==================== 事件处理函数 ====================
// 选择文集
const handleSelectNotebook = async (item, index) => {
  currentNotebookIndex.value = index;
  currentNotebookId.value = item.id;
  notebookName.value = item.name;
  notesData.value = [];
  currentNoteIndex.value = 0;
  
  // 清空编辑器
  noteData.value = {
    id: null,
    title: "",
    content_md: "",
    state: 1,
  };
  
  // 获取新文集的文章列表，自动选择第一篇
  await fetchNotes(false, item.id, true);
};
// 选择文章
const isLoad = ref(false);
const isSwitching = ref(false); // 标记是否正在切换文章，用于阻止保存逻辑
const isPublishing = ref(false); // 标记是否正在发布，用于阻止自动保存冲突
const titleDebounceFn = ref(null); // 保存防抖函数的引用
const contentDebounceFn = ref(null); // 保存防抖函数的引用

const handleSelectNote = async (item, index) => {
  // 清除所有正在执行的防抖函数，避免在切换时触发保存
  if (titleDebounceFn.value && typeof titleDebounceFn.value.cancel === 'function') {
    titleDebounceFn.value.cancel();
  }
  if (contentDebounceFn.value && typeof contentDebounceFn.value.cancel === 'function') {
    contentDebounceFn.value.cancel();
  }
  
  currentNoteIndex.value = index;
  // getNote 函数内部会处理 isSwitching 和 isLoad 状态
  await getNote(false, item.id);
};

// 文集相关弹窗
const handleEditNotebook = (item) => {
  cur_notebook.value = item;
  editVisible.value = true;
};

const handleDeleteNotebook = (item) => {
  delete_notebook.value = item;
  deleteVisible.value = true;
};

// 文章相关弹窗
const handleDeleteNote = (item) => {
  // 确保正确设置 current_note 的值
  current_note.id = item.id || "";
  current_note.title = item.title || "无标题";
  deleteNoteVisible.value = true;
};

// 显示/隐藏创建文集
const handleToggleCreateModal = () => {
  showCreateNb.value = !showCreateNb.value;
};

const getNote = async (isServer, noteId) => {
  // 在获取文章前，先设置切换状态，阻止保存操作
  isSwitching.value = true;
  isLoad.value = true;
  
  // 清除所有正在执行的防抖函数，避免在切换时触发保存
  if (titleDebounceFn.value && typeof titleDebounceFn.value.cancel === 'function') {
    titleDebounceFn.value.cancel();
  }
  if (contentDebounceFn.value && typeof contentDebounceFn.value.cancel === 'function') {
    contentDebounceFn.value.cancel();
  }
  
  try {
    const { data, error } = await noteFetch({
      method: "GET",
      server: isServer,
      key: `getNote-${noteId}`,
      params: { noteId },
    });

    // 检查是否有网络错误
    if (error.value) {
      console.error("获取文章详情请求失败:", error.value);
      if (isServer) {
        throw createError({
          statusCode: 500,
          statusMessage: "获取文章详情失败",
        });
      } else {
        message.error("获取文章详情失败，请检查网络连接");
        isLoad.value = false;
        isSwitching.value = false;
        return;
      }
    }

    // 检查响应数据是否存在
    if (!data.value) {
      if (isServer) {
        throw createError({
          statusCode: 500,
          statusMessage: "服务器响应异常",
        });
      } else {
        message.error("服务器响应异常");
        isLoad.value = false;
        isSwitching.value = false;
        return;
      }
    }

    if (data.value.code === 0) {
      // 确保数据正确映射
      const noteInfo = data.value.data.list;
      
      // 使用 Object.assign 批量更新，避免逐个更新触发多次响应
      const newNoteData = {
        id: noteInfo.id,
        title: noteInfo.title || "",
        content_md: noteInfo.content_md || noteInfo.content || "",
        state: noteInfo.state || 1,
      };
      
      // 使用 nextTick 确保在下一个 tick 更新，避免触发输入事件
      await nextTick();
      Object.assign(noteData.value, newNoteData);
      
      // 等待 DOM 更新完成后再允许保存
      await nextTick();
      
      // 延迟一下再允许保存，确保输入事件处理完毕
      setTimeout(() => {
        isSwitching.value = false;
        isLoad.value = false;
        changeState();
      }, 300);
    } else {
      if (isServer) {
        throw createError({
          statusCode: 500,
          statusMessage: data.value.msg || "获取文章详情失败",
        });
      } else {
        message.error(data.value.msg || "获取文章详情失败");
        isLoad.value = false;
        isSwitching.value = false;
      }
    }
  } catch (error) {
    console.error("获取文章详情异常:", error);
    isLoad.value = false;
    isSwitching.value = false;
    if (isServer) {
      throw error;
    } else {
      message.error("获取文章详情失败，请稍后重试");
    }
  }
};
// ==================== 编辑器相关 ====================

const save = () => {
  // 如果正在发布、加载或切换文章，不执行自动保存
  if (isLoad.value || isSwitching.value || isPublishing.value) return;
  if (!noteData.value.id) return; // 没有 id 时不保存（除非是新建）
  
  // 自动保存时，如果是已发布状态，改为下线状态；否则保持草稿状态
  noteData.value.state = noteData.value.state === 2 ? 3 : 1;
  handlePublishNote();
};

const contentSave = (e) => {
  // 如果正在发布、加载或切换文章，不执行自动保存
  if (isLoad.value || isSwitching.value || isPublishing.value) return;
  if (!noteData.value.id) return; // 没有 id 时不保存（除非是新建）
  
  noteData.value.content_md = e;
  // 自动保存时，如果是已发布状态，改为下线状态；否则保持草稿状态
  noteData.value.state = noteData.value.state === 2 ? 3 : 1;
  handlePublishNote();
};

// 使用 debounce 包装，保存引用以便可以取消
// 增加防抖时间到 3 秒，减少保存频率
contentDebounceFn.value = debounce(contentSave, 3000);
titleDebounceFn.value = debounce(save, 3000);

const handleTitleInput = () => {
  if (titleDebounceFn.value) {
    titleDebounceFn.value();
  }
};

const handleContentChange = (v) => {
  if (contentDebounceFn.value) {
    contentDebounceFn.value(v);
  }
};

// 已改为服务端上传，不再需要客户端 COS SDK
// 图片上传处理（使用服务端上传，避免 CORS 问题）
const handleImageUpload = async (files) => {
  return Promise.all(
    files.map(async (file) => {
      try {
        // 创建 FormData
        const formData = new FormData();
        formData.append("image", file);

        // 调用服务端上传接口
        const { data, error } = await uploadNoteImageFetch({
          method: "POST",
          body: formData,
          server: false,
          key: `uploadNoteImage-${Date.now()}-${Math.random()}`,
          getCachedData: () => undefined, // 禁用缓存
        });

        // 检查是否有网络错误
        if (error.value) {
          console.error("上传图片失败:", error.value);
          message.error("上传图片失败，请检查网络连接");
          throw new Error("上传失败");
        }

        // 检查响应数据是否存在
        if (!data.value) {
          console.error("服务器响应为空");
          message.error("服务器响应异常");
          throw new Error("服务器响应异常");
        }

        // 检查上传是否成功
        if (data.value.code === 0) {
          const imageUrl = data.value.data.url;
          // 确保返回的 URL 以 // 开头（协议相对路径）或完整的 URL
          const url = imageUrl.startsWith("http") 
            ? imageUrl 
            : imageUrl.startsWith("//") 
            ? imageUrl 
            : `//${imageUrl}`;
          
          return {
            url: url,
          };
        } else {
          console.error("上传图片失败:", data.value.msg);
          message.error(data.value.msg || "上传图片失败");
          throw new Error(data.value.msg || "上传失败");
        }
      } catch (err) {
        console.error("上传图片异常:", err);
        message.error("上传图片失败，请稍后重试");
        throw err;
      }
    })
  );
};
// 直接发布文章（将状态设置为2）
const handleDirectPublish = async () => {
  // 取消所有待执行的自动保存防抖函数，避免冲突
  if (titleDebounceFn.value) {
    titleDebounceFn.value.cancel();
  }
  if (contentDebounceFn.value) {
    contentDebounceFn.value.cancel();
  }
  
  // 设置发布标志，阻止自动保存
  isPublishing.value = true;
  
  try {
    // 设置状态为已发布
    noteData.value.state = 2;
    await handlePublishNote();
  } finally {
    // 发布完成后，延迟重置标志，确保自动保存不会立即触发
    setTimeout(() => {
      isPublishing.value = false;
    }, 5000); // 延迟5秒，确保自动保存的防抖时间（3秒）已经过去
  }
};

// 移动文章（待实现）
const handleMoveNote = () => {
  message.info("移动文章功能待实现");
};

// 文章发布/保存
const handlePublishNote = async () => {
  // 如果正在切换文章或加载中，不执行保存
  // 注意：发布操作（isPublishing=true）时允许执行，因为这是手动触发的
  if (isSwitching.value || isLoad.value) {
    return;
  }
  
  try {
    // 如果没有 id，说明是新文章，需要先创建
    if (!noteData.value.id) {
      // 先创建文章
      const { data: createData } = await noteFetch({
        method: "POST",
        body: {
          notebookId: currentNotebookId.value,
        },
        server: false,
        key: "createNoteForPublish",
      });

      if (createData.value.code === 0) {
        // 创建成功后，从返回的数据获取新文章的 id
        const newNoteId = createData.value.data?.noteId;
        if (newNoteId) {
          noteData.value.id = newNoteId;
        } else {
          // 如果没有返回 noteId，重新获取文章列表
          await fetchNotes(false, currentNotebookId.value, false);
          await nextTick();
          // 尝试从最新的文章列表中获取 id（通常是第一篇，最新创建的）
          if (notesData.value && notesData.value.length > 0) {
            noteData.value.id = notesData.value[0].id;
          }
        }
      } else {
        message.error(createData.value.msg || "创建文章失败");
        return;
      }
    }

    // 如果还是没有 id，说明创建失败或获取失败
    if (!noteData.value.id) {
      message.error("无法获取文章ID，请稍后重试");
      return;
    }

    // 确保 noteId 是数字类型
    const noteId = Number(noteData.value.id);
    if (isNaN(noteId) || noteId <= 0) {
      console.error("无效的文章ID:", noteData.value.id);
      message.error("文章ID无效，请刷新页面重试");
      return;
    }

    // 更新文章
    const { data, error } = await noteFetch({
      method: "PUT",
      body: {
        noteId: noteId, // 确保是数字类型
        title: noteData.value.title || "",
        content_md: noteData.value.content_md || "",
        state: Number(noteData.value.state) || 1, // 确保 state 也是数字
      },
      server: false,
      key: `publishNote-${noteId}-${Date.now()}`,
      // 禁用缓存，确保每次都会发送新请求
      getCachedData: () => undefined,
    });

    // 检查是否有网络错误
    if (error.value) {
      console.error("更新文章请求失败:", error.value);
      message.error("网络请求失败，请检查网络连接");
      return;
    }

    // 检查响应数据是否存在
    if (!data.value) {
      console.error("服务器响应为空");
      message.error("服务器响应异常，请稍后重试");
      return;
    }

    if (data.value.code === 0) {
      if (noteData.value.state === 2) {
        message.success("文章发布成功");
        // 发布成功后，立即取消所有待执行的自动保存防抖函数
        // 防止用户在发布后立即编辑时，自动保存将状态改回下线
        if (titleDebounceFn.value && typeof titleDebounceFn.value.cancel === 'function') {
          titleDebounceFn.value.cancel();
        }
        if (contentDebounceFn.value && typeof contentDebounceFn.value.cancel === 'function') {
          contentDebounceFn.value.cancel();
        }
      } else {
        message.success("文章保存成功");
      }
      
      // 刷新文章列表，确保列表显示最新状态（但不自动选择）
      await fetchNotes(false, currentNotebookId.value, false);
      
      // 更新列表中的当前文章状态（如果有的话）
      await nextTick();
      if (notesData.value && notesData.value.length > 0) {
        const currentNoteInList = notesData.value.find(n => n.id === noteData.value.id);
        if (currentNoteInList) {
          currentNoteInList.title = noteData.value.title || "无标题";
          currentNoteInList.state = noteData.value.state;
        }
      }
      
      changeState();
    } else {
      console.error("更新文章失败，响应:", data.value);
      message.error(data.value.msg || "保存失败");
      // 发布失败时，如果是在发布流程中，重置发布标志
      if (isPublishing.value && noteData.value.state === 2) {
        // 发布失败，恢复状态
        noteData.value.state = 3; // 恢复为下线状态
        isPublishing.value = false;
      }
    }
  } catch (error) {
    console.error("保存文章失败:", error);
    message.error("保存文章失败，请稍后重试");
    // 捕获错误时，如果是在发布流程中，重置发布标志
    if (isPublishing.value) {
      isPublishing.value = false;
    }
  }
};

// 返回首页
const handleGoHome = () => {
  navigateTo("/");
};
</script>

<template>
  <a-row style="height: 100vh">
    <!--文集列表-->
    <a-col :span="4">
      <div class="notebook">
        <div class="notebook-top">
          <a-button
            @click="handleGoHome"
            class="go-btn"
            type="primary"
            ghost
            shape="round"
            >回首页</a-button
          >
          <div @click="handleToggleCreateModal" class="add-notebook">
            <icon-mdi-plus-thick />新建文集
          </div>
          <div class="create-notebook" v-if="showCreateNb">
            <a-input
              v-model:value="notebookName"
              class="notebook-input"
              placeholder="请输入文集名称..."
            ></a-input>
            <div class="action-box">
              <a-button @click="createNotebook" size="small" shape="round" ghost
                >提交</a-button
              >
              <a-button
                @click="showCreateNb = false"
                style="color: #9a9a9a"
                type="text"
                >取消</a-button
              >
            </div>
          </div>
        </div>
        <div class="notebook-center">
          <template
            v-if="notebookData && notebookData.data && notebookData.data.list"
            v-for="(notebookItem, notebookIndex) in notebookData.data.list"
            :key="notebookItem.id"
          >
            <div
              class="notebook-c-item"
              :class="currentNotebookIndex === notebookIndex ? 'active' : ''"
              @click="handleSelectNotebook(notebookItem, notebookIndex)"
            >
              <span>{{ notebookItem.name }}</span>
              <a-dropdown
                v-if="currentNotebookIndex === notebookIndex"
                :trigger="['click']"
                overlayClassName="overlayClassName"
              >
                <a style="color: #ffffff" @click.prevent>
                  <icon-ant-design-setting-filled />
                </a>
                <template #overlay>
                  <a-menu>
                    <a-menu-item @click="handleEditNotebook(notebookItem)">
                      <a-row type="flex" justify="center" align="middle">
                        <icon-ep-edit style="margin-right: 5px" />
                        修改文集
                      </a-row>
                    </a-menu-item>
                    <a-menu-item @click="handleDeleteNotebook(notebookItem)">
                      <a-row type="flex" justify="center" align="middle">
                        <icon-ep-delete style="margin-right: 5px" />
                        删除文集
                      </a-row>
                    </a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </div>
          </template>
        </div>
      </div>
    </a-col>
    <a-col :span="5" class="note-writer-list">
      <!--文章列表-->
      <div class="create" @click="createNote">
        <icon-ep-circle-plus-filled /> 新建文章
      </div>
      <div class="note-create">
        <template
          v-if="notesData && notesData.length > 0"
          v-for="(noteItem, noteIndex) in notesData"
          :key="noteItem.id"
        >
          <div
            class="note-create-item"
            :class="currentNoteIndex === noteIndex ? 'active' : ''"
            @click="handleSelectNote(noteItem, noteIndex)"
          >
            <Icon icon="ph:file-text-fill" class="text-icon" />
            <span>{{ noteItem.title || '无标题' }}</span>
            <a-dropdown
              v-if="currentNoteIndex === noteIndex"
              :trigger="['click']"
              overlayClassName="overlayClassName"
            >
              <a style="color: #595959" @click.prevent>
                <icon-ant-design-setting-filled />
              </a>
              <template #overlay>
                <a-menu>
                  <a-menu-item @click="handleDirectPublish">
                    <a-row type="flex" justify="center" align="middle">
                      <icon-mdi-share style="margin-right: 5px" />
                      直接发布
                    </a-row>
                  </a-menu-item>
                  <a-menu-item @click="handleMoveNote">
                    <a-row type="flex" justify="center" align="middle">
                      <icon-ep-folder-opened style="margin-right: 5px" />
                      移动文章
                    </a-row>
                  </a-menu-item>
                  <a-menu-item @click="handleDeleteNote(noteItem)">
                    <a-row type="flex" justify="center" align="middle">
                      <icon-ep-delete style="margin-right: 5px" />
                      删除文章
                    </a-row>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
        </template>
      </div>
    </a-col>
    <a-col :span="15">
      <!--编辑-->
      <div class="edit-note">
        <div style="height: 80px; line-height: 80px">
          <a-input
            @input="handleTitleInput"
            style="font-size: 30px"
            :bordered="false"
            v-model:value="noteData.title"
          ></a-input>
        </div>
        <Editor
          ref="editor"
          v-model:value="noteData.content_md"
          :plugins="plugins"
          @change="handleContentChange"
          :uploadImages="handleImageUpload"
        />
      </div>
    </a-col>
  </a-row>
  <!--修改文集弹框-->
  <a-modal
    v-model:open="editVisible"
    width="25%"
    title="修改文集"
    okText="提交"
    cancelText="取消"
    @ok="updateNotebook"
  >
    <a-input
      v-model:value="cur_notebook.name"
      style="height: 40px"
      placeholder="输入文集名称"
    ></a-input>
  </a-modal>
  <!--删除文集弹框-->
  <a-modal
    v-model:open="deleteVisible"
    width="20%"
    okText="提交"
    cancelText="取消"
    @ok="removeNotebook"
  >
    <div>
      <p style="margin-top: 30px">
        确认删除文集《{{ delete_notebook.name }}》，文章将被移动到回收站。
      </p>
    </div>
  </a-modal>

  <!--删除文章弹框-->
  <a-modal
    v-model:open="deleteNoteVisible"
    width="20%"
    okText="提交"
    cancelText="取消"
    @ok="removeNote"
  >
    <div>
      <p style="margin-top: 30px">
        确认删除文章《{{ current_note.title }}》，文章将被移动到回收站。
      </p>
    </div>
  </a-modal>
</template>

<style lang="scss" scoped>
.notebook {
  height: 100%;
  background-color: #404040;
  .notebook-top {
    padding: 20px;
    .go-btn {
      width: 100%;
      height: 40px;
      font-size: 16px;
    }
    .add-notebook {
      margin-top: 20px;
      color: #ffffff;
      display: flex;
      align-items: center;
      cursor: pointer;
    }
    .notebook-input {
      margin-top: 20px;
      background-color: #595959;
      border: none;
      height: 36px;
      color: #ffffff;
    }
    .action-box {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .notebook-center {
    .active {
      background-color: #666666;
      border-left: 3px solid #ec7259 !important;
      padding-left: 17px !important;
    }
    .notebook-c-item {
      height: 40px;
      line-height: 40px;
      color: #ffffff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px;
      &:hover {
        background-color: #666666;
      }
      span {
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
.note-writer-list {
  border-right: 1px #e8e8e8 solid;
  height: 100%;
  .create {
    padding: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #595959;
    font-size: 15px;
    border-bottom: 1px solid #e8e8e8;
    svg {
      margin-right: 6px;
    }
  }
  .note-create {
    .active {
      background-color: #e6e6e6;
      border-left: 3px #ec7259 solid;
      padding-left: 17px !important;
    }
    .note-create-item {
      border-bottom: 1px #e8e8e8 solid;
      padding: 20px;
      display: flex;
      justify-content: space-between;
      .text-icon {
        color: #bebebe;
        font-size: 25px;
      }
      span {
        font-size: 16px;
        color: #595959;
        margin-left: 10px;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
      }
    }
  }
}
</style>

<style>
.overlayClassName .ant-dropdown-content .ant-dropdown-menu {
  border-radius: 8px !important;
  width: 130px;
  padding: 10px 0 !important;
}
.notebook-top .ant-input:focus,
.ant-input-focused {
  border-color: #595959;
  box-shadow: 0 0 0 2px #595959 !important;
  border-right-width: 1px !important;
  outline: 0;
}
.create-notebook .ant-btn.ant-btn-background-ghost {
  color: #42c02e;
  border-color: #42c02e;
  height: 30px;
}
.ant-modal-footer {
  padding: 10px 16px;
  text-align: right;
  background: transparent;
  border-top: none;
  border-radius: 0 0 2px 2px;
}
.ant-modal-header {
  padding: 16px 24px;
  color: rgba(0, 0, 0, 0.85);
  background: #fff;
  border-bottom: none;
  border-radius: 2px 2px 0 0;
}

.edit-note .bytemd {
  height: calc(100vh - 80px) !important;
}
.edit-note .bytemd-toolbar-right [bytemd-tippy-path="5"] {
  display: none;
}
.edit-note .bytemd-body img {
  width: 100%;
}
</style>
